<template>
<div class="page-container-padding" v-loading="pageDataLoading">
  <!-- 查询条件 -->
  <div>
    <span>
      <el-date-picker
      style="width:220px;"
        v-model="dateRange"
        type="daterange"
        size="mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false"
      >
      </el-date-picker>
    </span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="dateRangeQuery">查询</el-button></span>
    <span style="margin-left:6px;"><el-button type="success" size="mini" @click="currentMonthQuery">查本月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preMonthQuery">上一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextMonthQuery">下一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="yearQuery">全年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preYearQuery">上一年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextYearQuery">下一年</el-button></span>
  </div>
  <!-- 显示数据 -->
  <div style="margin-top:6px;">
    <el-table border stripe :data="tableDataList">
      <el-table-column prop="create_date" label="日期" width="90px"></el-table-column>
      <el-table-column prop="title" label="标题" width="260px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="applicant" label="部门类型" width="100px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="lecture_type_zh" label="类型" width="110px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="lecture_scale_zh" label="规模" width="150px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="effect_flag" label="效果" width="70px" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="level_flag" label="评级" width="70px" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="is_exchange" label="是否交易所" width="120px" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="exchange_name" label="交易所" width="120px" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="annex" label="附件" width="240px" show-overflow-tooltip>
        <template slot-scope="scope">
          <vab-icon :icon="['fas', 'download']" @click="toDownloadAnnex(scope.row)"></vab-icon>
          <span v-if="scope.row.annex" class="annex-file" @click="toPreview(scope.row)">{{ scope.row.annex }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 预览弹窗 -->
  <el-dialog width="900px" top="15px" :visible.sync="showDocxView">
    <div style="height:calc(100vh - 128px);overflow-y:auto;">
      <div ref="docFile"></div>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { getFileBlob, downloadFile } from '@/api/fileHandler'
import { getMonthDatePoint, getYearDatePoint, datetimeToStr } from '@/utils/datetimeUtils'
import { getMyLecture } from '@/api/departmentWork/lecture'
export default {
  data(){
    return {
      dateRange: [],
      pageDataLoading: false,
      tableDataList: [],
      showDocxView: false
    }
  },
  mounted() {
    this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
    this.queryPageData()
  },
  methods:{
    // 查询数据
    queryPageData(){
      const para = {
        start: datetimeToStr(this.dateRange[0],true,''),
        end: datetimeToStr(this.dateRange[1],true,'')
      }
      this.pageDataLoading = true
      getMyLecture(para).then(res => {
        this.tableDataList = res.data
        this.pageDataLoading = false
      }).catch(err => {
        this.pageDataLoading = false
      })
    },

    toPreview(row){
      if (row.annex_url.slice(-5) === '.docx'){
        this.showDocxView = true
        getFileBlob(row.annex_url).then(({data}) => {
          this.$docxView.renderAsync(data, this.$refs.docFile)
        })
      }else{
        this.toDownloadAnnex(row)
      }
    },

    // 下载附件
    toDownloadAnnex(row){
      if(!row.annex){return}
      downloadFile(row.annex_url)
    },

    // 指定日期范围查询
    dateRangeQuery(){
      this.queryPageData()
    },

    // 本月查询
    currentMonthQuery(){
      this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
      this.queryPageData()
    },

    // 上一月查询
    preMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
      this.queryPageData()
    },

    // 下一月查询
    nextMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
      this.queryPageData()
    },

    // 当前月份所在全年查询
    yearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'current')
      this.queryPageData()
    },

    // 上一年查询
    preYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'previous')
      this.queryPageData()
    },

    // 下一年查询
    nextYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'next')
      this.queryPageData()
    }
  }
}
</script>

<style scoped lang="scss">
.annex-file{
  color: #0073FC;
  cursor:pointer;
    margin-left:4px;
}
::v-deep {
  .docx-wrapper{
    background-color: #fefefe;
  }
}
</style>
